<template>
	<view class="case-goods-list">
		<view class="goods-view-item" v-for="(item,index) in goodsList" :key="index" @click="goGoodsDetails(item.goods_id)">
			<image :src="item.image_middle" mode=""></image>
			<view class="case-goods-name">{{item.goods_name}}</view>
			<view class="case-goods-price">¥{{item.retail_price}}</view>
			<view class="case-goods-click">人气{{item.click}}</view>
		</view>
		<lw-nodata v-if="goodsList.length == 0"></lw-nodata>
		<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" v-if="goodsList.length > 4" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				case_id: '',
				goodsList: [],
				page: 0,
				more: false,
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '我也是有底线的'
				},
			};
		},
		onLoad(e) {
			this.case_id = e.case_id
			this.init()
		},
		methods: {
			init() {
				let data = {
					case_id: this.case_id,
					page: this.page,
					limit: 10,
				}
				this.$u.apiWei.ExampleGoodsList(data).then(res => {
					res.datas.forEach((item) => {
						this.goodsList.push(item)
					})
					if (res.datas.length == 10) {
						this.more = true
					} else {
						this.more = false
					}
				})
			},
			goGoodsDetails(id){
				uni.navigateTo({
					animationDuration: 500,
					url: '/pages/product-info/product-info?goods_id=' + id
				})
			}
		},
		onPullDownRefresh() {
			this.page = 0
			this.goodsList = []
			this.init()
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);

		},
		onReachBottom() {
			this.status = 'loading';
			setTimeout(() => {
				this.status = 'nomore';
			}, 1000)
			if (!this.more) return;
			this.page++;
			this.init()
		},
	}
</script>

<style lang="scss">
	.case-goods-list {
		display: flex;
		flex-wrap: wrap;
		margin: 32rpx 0;
		width: 100%;

		.goods-view-item {
			padding-left: 10rpx;
			margin-left: 20rpx;
			width:336rpx;
			box-sizing: border-box;

			image {
				display: block;
				width:336rpx;
				height:336rpx;
				border-radius: 16rpx;
				
			}

			.case-goods-name {
				margin: 24rpx 0 30rpx 0;
				font-size: 24rpx;
				color: #28221F;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				text-align: center;
			}

			.case-goods-price {
				margin-bottom: 35rpx;
				font-size: 24rpx;
				text-align: center;
				font-weight: bold;
				color: #F59359;
			}

			.case-goods-click {
				margin-bottom: 80rpx;
				font-size: 22rpx;
				text-align: center;
				color: #9E9E9E;
			}

		}
	}
</style>
